<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>

	<body>
		<style>
			li {
				font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
				font-weight: 800;
			}
		</style>
		<script src="js/vue.js"></script>
		<div id="app">
			<h4>只显示9个字的本文小Demo</h4>
			<ul>
				<li><span>A:</span>{{content1 | subStr}}</li>
			</ul>
		</div>
		<script>
			var demo = new Vue({
				el: "#app",
				data: {

					content1: "每天编程一小时大型IT公益活动",
				},
				filters: {
					subStr: function(value) {
						if(value.length > 9) { //如果字串长度大于9
							return value.substr(0, 9) + "..."; //返回前9个字符
						} else {
							return value;
						}
					}
				}
			})
		</script>
	</body>

</html>